<template>
  <div class="info-card">
    <el-card class="box-card">
      <div id="write" class="card-text">
        <h1>{{data.title}}</h1>
        <el-collapse v-model="data.activeNames">
          <el-collapse-item v-for="(val,index) in data.content" :key="index" :title="val.title" :name="val.name">
            <div v-html="val.content"></div>
          </el-collapse-item>
        </el-collapse>
      </div>

    </el-card>
  </div>
</template>

<script>

export default {
  props: {
    rid:  {type:String,default:"1"},
  },
  data() {
    return {
      data: [],
      jsonUrlList:[
        '/json/ResearchSupersonicFlow.json',
        '/json/ResearchDroplets.json',
        '/json/ResearchMultiscaleCoupling.json',
        '/json/ResearchNanomaterials.json',
        '/json/ResearchNovelUAV.json',
        '/json/ResearchIntelligentES.json',
        '/json/ResearchHydrogenSFC.json',
      ],
    };
  },
  created() {
    this.init();
  },
  watch: {
    //监听路由是否变化
    rid :{ 
      immediate: true, // 这句重要
      handler() {
        this.init()
      }
    }
  },
  methods: {
    init() {
      var rid_int = parseInt(this.rid);
      console.log(rid_int);
      this.$http.get(this.jsonUrlList[rid_int-1]).then((response) => {
      this.data = response.data;
    });
    },
  }

 };
</script>

<style lang="less" scoped>
@import "../typora_like.less";
.info-card{width: 100%; }
</style>
